{% extends "base.html" %}
{% load thumbnail %}

{% block style %}
    <link rel="stylesheet" type="text/css" href="/static_media/css/main/outcrop.css">
   
{% endblock style %}

{% block script %}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHPN4aDb1OTOiMkDGZcuRJd4cFd-ceXds&sensor=false"></script>
    <script type="text/javascript">
		function init()
		{
			var orangeIcon = {
				url:"/static_media/images/pin_orange.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}
			  
			var blueIcon = {
				url:"/static_media/images/pin_blue.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}

			var mapOptions = {
			  //center map on the UK
			  center: new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}),
			  zoom: 14,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
							
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);
			var marker = new google.maps.Marker({ position: new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}), map: map, title: "The outcrop!", icon:blueIcon })
			
			var positionArray = new Array();
			var markerArray = new Array();
			var titleArray = new Array();
			var urlArray = new Array();
			
			{% for image in image_list %}
			positionArray.push( new google.maps.LatLng({{image.latitude}}, {{image.longitude}}));
			titleArray.push("{{image.name}}");
			urlArray.push("/outcrop/view_images/{{ outcrop.pk }}/{{image.pk}}/0/");
			{% endfor %}
			
			{%if my_image_list %}
			{% for image in my_image_list %}
			positionArray.push( new google.maps.LatLng({{image.latitude}}, {{image.longitude}}));
			titleArray.push("{{image.name}}");
			urlArray.push("/user/excursion/{{ excursionItem.pk }}/images/{{ image.pk }}/0/");
			{% endfor %}
			{%endif%}
			
			for (i=0; i<positionArray.length; i++)
			{
				markerArray.push( new google.maps.Marker({ position: positionArray[i], map: map, title: titleArray[i], icon:orangeIcon, url: urlArray[i] }));
				google.maps.event.addListener(markerArray[i], 'click', function(event) {
					window.location.href = this.url
				});
			}
		}
    </script>
{% endblock script %}

{% block content %}
    	{% if isAdmin %}
		<div class="item">
			<div id="settingsBar"> <a href="/user/outcrop/edit/{{ outcrop.pk }}/">Outcrop Settings</a> </div>
		</div>
		{% endif %}  
	       <div class="item">
           		<div class="itemHeading">
                	{{ outcrop.name }}
                </div>
                <div id="map">
                </div>
                <div id="leftMapItem">
                   	<div class="itemSmallHeading">Description</div>
                	{{ outcrop.description|linebreaksbr }}
                </div>
		   </div>
           {% if fromExcursion %}
           <div class="item">
           		<div class="itemHeading">
                	My Excursion's Images
                </div>
                <div class="images">
                     {% for image in my_image_list %}
                    	<div class="imageItem">
							<a href="/user/excursion/{{ excursionItem.pk }}/images/{{ image.pk }}/0/">
                        	<img src="{{ image.image.thumb.url }}" alt="{{ image.name }}" class="image"/>
                       		</a>
                        </div>
                    {% endfor %}
                </div>
		   </div>
           {% endif %}
           <div class="item">
           		<div class="itemHeading">
                	Public Images
                </div>
                <div class="images">
                     {% for image in image_list %}
                    	<div class="imageItem">
							<a href="/outcrop/view_images/{{ outcrop.pk }}/{{image.pk}}/0/">
                        	<img src="{{ image.image.thumb.url }}" alt="{{ image.name }}" class="image"/>
                       		</a>
                        </div>
                    {% endfor %}
                </div>

      <!-- end .right -->
	  		   </div> 

{% endblock content %}